<template>
  <div class="app-container">
    <el-row>

      <el-col :span="15" class="table">
        <el-table :data="tableData" border style=" width: 100%"  :row-class-name="showCss" >
          <el-table-column prop="date" label="指标" width="120" >
          </el-table-column>
          <el-table-column prop="level" sortable label="等级" width="100">
          </el-table-column>
          <el-table-column prop="name" label="内容描述" width="240">
          </el-table-column>
          <el-table-column prop="time"  sortable label="响应时间(ms)" width="180">
          </el-table-column>
          <el-table-column prop="h1"  sortable label="得分" >
          </el-table-column>
        </el-table>
      </el-col>

      <el-col :span="8" class="box">
        <div class="rating">
          <input type="radio" name="star" id="star1">
          <!-- for绑定对应ID -->
          <label for="star1">
            <img src="./img/sad.png" alt="">
            <h4>等的花儿都谢了</h4>
          </label>
          <input type="radio" name="star" id="star3" checked='checked'>
          <label for="star3">
            <img src="./img/nerd.png" alt="">
            <h4>非常流畅</h4>
          </label>
          <!-- 默认选择的表情 -->
          <input type="radio" name="star" id="star2">
          <label for="star2">
            <img src="./img/pressure.png" alt="">
            <h4>有点不行哦</h4>
          </label>
          <h2 class=" text">
            <el-avatar :size="25" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            player comment
          </h2>
        </div>
      </el-col>
    </el-row>



    <el-row>
      <el-col :span="8">
        <div class="pageRating">页面性能评分</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10" id="Process-box" :row-class-name="showCss" >

      </el-col>
      <el-col :span="12" class="Process-box2">
        <div class="table-box">
          <table class="table-dec">
            <H3>用户信息</H3>
            <tr>
              <td>
                <div><span>url：</span><span>{{url}}</span></div>
              </td>
                <td>
                <div><span>备注：</span>
                  <el-tag size="small">Normal</el-tag>
                </div>
              </td>
            </tr>

            <tr>
              <td>
                <div><span>日期：</span><span>{{riqi}}</span></div>
              </td>
            </tr>
            <tr>
              <td>
                <div><span>浏览器：</span><span>{{llq}}</span></div>
              </td>
            </tr>
          </table>
        </div>
      </el-col>

    </el-row>

  </div>
</template>
<script src="./js/flexable"></script>
<script src="./js/index.js"></script>
  <script>
import { getList } from '@/api/table'
// import { myChart } from "./js/index.js";
  import echarts from 'echarts'

export default {
    mounted() {
      this.map()
        this.apiarrcge()
    },


    methods: {},
    watch: {},
    created() {
      this.map()
        this.getlist()
        this.apiarrcge()
    },
  

  methods: {

      getlist() {
        this.$api.Logs.getTiming(1).then((res)=>{
          console.log(res)
        this.tableData[0].time = res.data.data[0].FP;
        this.arr[0]=(Math.trunc((1 - this.tableData[0].time/2500)*100));
        this.tableData[1].time = res.data.data[0].FCP;
        this.arr[1]=(Math.trunc((1 - this.tableData[1].time/3000)*100));
        this.arr[2]=(Math.trunc((1 - this.tableData[2].time/4000)*100));
        this.arr[3]=(Math.trunc((1 - this.tableData[3].time/300)*100));
        this.arr[4]=(Math.trunc((1 - this.tableData[4].time/0.25)*100));
        this.tableData[5].time = res.data.data[0].DomReady;
        this.tableData[6].time = res.data.data[0].parseDNS;
        this.url = res.data.data[0].url;
        this.riqi = res.data.data[0].timestamp;
        this.llq = res.data.data[0].userAgent;
          console.log(this.arr);
      })  
            this.map()
      },
        map(){
          var chartDom = document.getElementById('Process-box');
          var myChart = echarts.init(chartDom);
            // console.log(this.tableData[0].time)
          var option;
          option = {
                  
            color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
            legend: {
              left:25,
              top:15,
            },
            radar: {
              // shape: 'circle',
              indicator: [
                { name: 'FCP', max: 100 },
                { name: 'FP', max: 100 },
                { name: 'LCP', max: 100 },
                { name: 'FID', max: 100 },
                { name: 'CLS', max: 100 },
              ], 
              center: ['50%', '60%'],
                radius: 90,
            
              
                shape: 'circle',
                axisName: {

                  color: '#1E1E1E',
                },
                    splitArea: {
                  areaStyle: {
                    color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 10
                  }
                },
                    axisLine: {
                  lineStyle: {

                  }
                },
              splitLine: {
                  lineStyle: {
                    color: 'rgba(211, 253, 250, 0.8)'
                  }
                }

            },
            series: [
              {
                  temStyle: {
                  color: '#FFD93B'
                },
                   itemStyle: {
        color: '#F9713C'
      },
                name: 'Budget vs spending',
                type: 'radar',
                data: [
                  {
                    value: this.arr,
                    name: '第一份日志'
                  },
                ]
              }
            ]
          };

          option && myChart.setOption(option);

        },
        apiarrcge(){
           
         var i=0;
        this.tableData.forEach(e => {
          if (i == 0){
            this.arr.push(Math.trunc((1 - e.time/2500)*100));
            //  console.log(this.arr)  
          }else if(i == 1){
             this.arr.push(Math.trunc((1 - e.time/3000)*100));
          }else if(i == 2){
                this.arr.push(Math.trunc((1 - e.time/4000)*100));
          }else if (i == 3){
              this.arr.push(Math.trunc((1 - e.time/300)*100));
          }else if (i == 4){
            this.arr.push(Math.trunc((1 - e.time/0.25)*100));
          }
        i++;

        })
         this.map()
     
        },

       showCss({row, rowIndex}){
          
          //  console.log(rowIndex);
        switch (rowIndex) {
      
         case 0:
          row.h1 = Math.trunc((1 - row.time/2500)*100);
            //  console.log(row); 
         if(row.time>=0 && row.time<=1000){
          row.level="Good";
    
          return "green";
         }else if(row.time>1000 && row.time<2500){
               row.level="Needs Improvement";
          
          return "yellow";
         }else if(row.time>2500){
              row.level="Poor";
             
          return "red";
         }
     

         case 1 :
     
           row.h1 = Math.trunc((1 - row.time/3000)*100);
  
          //  console.log(this.arr[0]);
          if(row.time>=0&& row.time<=1800){
                     row.level="Good";
           
          return "green";
         }else if (row.time>1800 && row.time<=3000){
                  row.level="Needs Improvement";
          return "yellow";
         }else if (row.time>3000){
              row.level="Poor";
          return "red"
         }


          case 2 :

              row.h1 = Math.trunc((1 - row.time/4000)*100);
          if(row.time>=0&&row.time<=2500){
                row.level="Good";
          return "green";
         }else if (row.time>2500&&row.time<=4000){
                   row.level="Needs Improvement";
          return "yellow";
         }else if (row.time>4000){
           row.level="Poor";
          return "red";
         }
          case 3 :
     
              row.h1 = Math.trunc((1 - row.time/300)*100);
          if(row.time>=0&&row.time<=100){
             row.level="Good";
          return "green";
         }else if(row.time>100&&row.time<=300){
            row.level="Needs Improvement";
          return "yellow";
         }else if (row.time>300){
                 row.level="Poor";
          return "red"
         }
          case 4 :
    
               row.h1 = Math.trunc((1 - row.time/0.25)*100);
          if(row.time>=0&&row.time<=0.1){
              row.level="Good";
          return "green";
         }else if (row.time>0.1&&row<=0.25){
         row.level="Needs Improvement";
          return "yellow";
         }else if (row.time>0.25){
          row.level="Poor";
          return "red";
         }
          case 5 :
               row.h1 = Math.trunc((1 - row.time/2500)*100);
            //  console.log(row); 
         if(row.time>=0 && row.time<=1000){
          row.level="Good";
    
          return "green";
         }else if(row.time>1000 && row.time<2500){
               row.level="Needs Improvement";
          
          return "yellow";
         }else if(row.time>2500){
              row.level="Poor";
             
          return "red";
         }
              case 6 :
                row.h1 = Math.trunc((1 - row.time/2500)*100);
            //  console.log(row); 
         if(row.time>=0 && row.time<=1000){
          row.level="Good";
    
          return "green";
         }else if(row.time>1000 && row.time<2500){
               row.level="Needs Improvement";
          
          return "yellow";
         }else if(row.time>2500){
              row.level="Poor";
             
          return "red";
         }
        }
      
       },
    },
  data() {
    return {
    arr:[],
    url:"http://localhost:8080/",
    riqi:"2022-07-28T09:29:55.647Z",
    llq:"chrome",
   
      tableData: [{
        date: 'FP',
        level: 'Good',
        name: "渲染出第一个像素点",
        time: '30.599999994039536',
        h1:"60",
      }, {
        date: 'FCP',
        level: 'Good',
        name: "渲染出第一个内容",
        time: '33.489669984039536',
         h1:"60",
      }, {
        date: 'LCP',
        level: 'Good',
        name: "最大内容渲染时间",
        time: '17.899',
        h1:"60",
      }, {
        date: 'FID',
        level: 'Good',
        name: "用户和页面进行首次交互操作",
        time: '16.9000000059604645',
        h1:"60",
      }, {
        date: 'CLS',
        level: 'Good',
        name: "累计布局位移",
        time: '0.00144590283945624',
        h1:"60",
      }, {
        date: 'DomReady',
        level: 'Good',
        name: "页面加载后执行js的时间",
        time: '40',
        h1:"60",
      }, {
        date: 'parseDNS',
        level: 'Good',
        name: "DNS域名解析",
        time: '0',
        h1:"60",
      }]

    }

  }

}


</script>

<style>
@import "./css/index.css"
</style>

